<template>
  <div>
<!--    <div id="ma" style="margin-left: 5px"></div>-->
    <el-row :gutter="20" style="">
      <el-col :span="6" v-for="item in cards" style="margin-top: 10px" :key="item.title">
        <el-card class="box-card">
          <div slot="header" class="clearfix">{{ item.title }}</div>
          <div class="text item">
            <svg class="icon" aria-hidden="true">
              <use :xlink:href="item.icon" style="width: 100px"></use>
            </svg>
            <span class="text">{{ form[item.key] }}</span>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="chart-container" ref="chart2"></div>
      </el-col>
      <el-col :span="12">
        <div class="chart-container" ref="chart1"></div>
      </el-col>
    </el-row>
     

  </div>
</template>

<script>
import * as echarts from 'echarts'
import {ElMessage} from "element-plus";
import request from "../utils/request";
import axios from 'axios';

export default {
  
  data() {
    return {
      form: {},
      cards: [
        { title: '场馆量', key: 'venueNumber', icon: '#icon-changguan' },
        { title: '预定量', key: 'reservationNumber', icon: '#icon-yuyue1'   },
        { title: '预约成功率', key: 'success', icon: '#icon-nav_icon_s_bgsj' },
        { title: '用户数', key: 'userNumber', icon: '#icon-yonghu' }
      ],
      data:{}
    }
  },

  mounted() {
    this.getInfo()
    // this.circleTimer()
   
  },
  methods: {
    async getInfo() {
      const res = await axios.get('http://localhost:8080/api/reportData/getHomeInfo')
      const {data} = res.data
      this.form = {
        ...data,
        success: `${(data.successNumber / data.reservationNumber * 100).toFixed(1)}%`
      }
      this.getChart2(data.everyDayReservation)
      this.getChart1(data.statusCount)
    },

    // ---------------------------------------------------------------------------
    getChart1(data) {
      const chart1 = echarts.init(this.$refs.chart1);
      chart1.setOption({
        title: {
          text: '场馆审批情况'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            // name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: data.map(it=>({
              name: it.status,
              value: it.count
            }))
          }
        ]
      });
    },

    // ---------------------------------------------------------------------------
    getChart2(arr) {
      const data = []
      const series = []
      arr.forEach(it => {
        data.push(it.day)
        series.push(it.count)
      });
      const chart2 = echarts.init(this.$refs.chart2);
      chart2.setOption({
        title: { text: '近七天场馆预定数量' },
        xAxis: {
          type: 'category',
          data,
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            data: series,
            type: 'line',
          },
        ],
      });
    },

    // circleTimer() {
    //   this.getTimer()
    //   setInterval(() => {
    //     this.getTimer()
    //   }, 1000)
    // },
    // getTimer() {
    //   var d = new Date()
    //   var t = d.toLocaleString()
    //   document.getElementById('myTimer').innerHTML = t
    // },
   
  }
}
</script>

<style scoped>
.box-card {
   width: 80%;
  margin-bottom: 25px;
  margin-left: 10px;
}

.clearfix {
  text-align: center;
  font-size: 15px;
}

.text {
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  vertical-align: super;
}

#main {
  width: 20%;
  height: 30%;
  margin-top: 20px;
}

#gender {
  width: 20%;
  height: 30%;
  margin-top: 20px;
}

#ma {
  width: 100%;
  height: 15%;
}

.icon {
  width: 50px;
  height: 50px;
  padding-top: 5px;
  padding-right: 10px;
}
.chart-container {
  width: 100%;
  height: 400px;
}
</style>